<template>
<div class="coupon-marketing-records views-container">
    <div class="wlm-table">
        <div class="wlm-table-header" style="margin-bottom: 20px;">
            <div class="dashboard-header" v-if="categoryData">
                <el-row :gutter="8" style="margin-bottom:20px;">
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                            <div class="item-title"><span>用券总成交额</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">使用该优惠券的订单付款总金额</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <span class="text-danger">￥</span><span>{{categoryData.turnover}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                            <div class="item-title"><span>优惠券总金额</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">使用该优惠券优惠的总金额</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <span class="text-danger">￥</span><span>{{categoryData.sumCouponPrice}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                            <div class="item-title"><span>费效比</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">优惠券总金额/用券总成交额</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <!-- <span v-if="categoryData.ratio">{{`${categoryData.ratio}`.includes('.')?(`${categoryData.ratio}`).split('.')[0] + '.' + (`${categoryData.ratio}`).split('.')[1].substr(0,2): `${categoryData.ratio}`.substr(0,2)}}%</span> -->
                                <span v-if="categoryData.ratio">{{categoryData.ratio | numFilter}}%</span>
                                <span v-if="!categoryData.ratio">-</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c ">
                            <div class="item-title"><span>用券比单价</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">用券总成交额/使用该优惠券优惠的付款订单数</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <div v-if="categoryData.unitPrice"><span class="text-danger" >￥</span><span>{{categoryData.unitPrice}}</span></div>
                                <div v-if="!categoryData.unitPrice">-</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="8">
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                            <div class="item-title"><span>用券老客户</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">使用该优惠券的老用户数</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <span v-if="categoryData.MembersCount">{{categoryData.MembersCount.oldMembersCount}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                            <div class="item-title"><span>用券新客户</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">使用该优惠券的新用户数</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <span v-if="categoryData.MembersCount">{{categoryData.MembersCount.newMembersCount}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                            <div class="item-title"><span>购买商品数</span>
                                <el-popover placement="top-start"  trigger="hover">
                                    <div style="font-size:12px">使用该优惠券购买的商品数</div>
                                    <el-button style="color:#333333" type="text" slot="reference"><svg-icon icon-class="wenhao" style="font-size:20px"/></el-button>
                                </el-popover>
                            </div>
                            <div class="item-num">
                                <span>{{categoryData.goodsCount}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">

                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.announcement.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="用户：" class="search">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.announcement.files.nickName" placeholder="请输入平台名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="领取时间：" class="search">
                        <el-date-picker v-model="tableFormatData.announcement.files.time" type="datetimerange" value-format="timestamp" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="" class="filter">
                        <el-form-item label="使用状态：">
                            <el-select v-model="tableFormatData.announcement.files.is_use" placeholder="请选择">
                                <el-option :label="'未使用'" value="0">
                                </el-option>
                                <el-option :label="'已使用'" value="1">
                                </el-option>
                                <el-option :label="'全部'" value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.announcement.key" :data="tableFormatData.announcement.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column prop="date" label="用户" >
                    <template slot-scope="scope">
                        <div class="wlm-table-logos">
                            <img class="logo" :src="scope.row.avatarUrl">
                            <span class="inner-text">{{scope.row.nickName}}</span>
                        </div>
                    </template>
                </el-table-column>
                  <el-table-column prop="date" label="优惠券类型" >
                    <template slot-scope="scope">
                        {{scope.row.coupon_type.text}}
                    </template>
                  </el-table-column>
                   <el-table-column prop="date" label="优惠券优惠" >
                    <template slot-scope="scope">
                        {{scope.row.coupon_coupon_value}}
                    </template>
                  </el-table-column>
                <el-table-column prop="name" label="领取时间" >
                    <template slot-scope="scope">
                        <span>{{scope.row.create_time}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="领取渠道" >
                    <template slot-scope="scope">
                        <span>{{sourceType[`${scope.row.source}`]}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="使用状态" >
                    <template slot-scope="scope">
                        <span>{{scope.row.is_use=='1'?'已使用':'未使用'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="使用时间" >
                    <template slot-scope="scope">
                        <span>{{scope.row.order.length>0?scope.row.order[0]['create_time']:'-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="订单" >
                    <template slot-scope="scope">
                        <span >{{scope.row.order.length>0?scope.row.order[0]['order_no']:'-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="订单付款金额" >
                    <template slot-scope="scope">
                        <span >{{scope.row.order.length>0?scope.row.order[0]['pay_price']:'-'}}</span>
                    </template>
                </el-table-column>
                  <el-table-column prop="name" label="实际优惠金额" >
                    <template slot-scope="scope">
                      <span >{{scope.row.order.length>0?scope.row.order[0]['coupon_price']:'-'}}</span>
                    </template>
                  </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.announcement.pagination.page" :page-sizes="tableFormatData.announcement.pagination.pagesizes" :page-size.sync="tableFormatData.announcement.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.announcement.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  couponInfo,
  ReceiveInfoList
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'CouponMarketingRecords',
  components: {

  },
  computed: {
  },
  filters: {
    numFilter(value) {
      const tempVal = parseFloat(value).toFixed(3)
      const realVal = tempVal.substring(0, tempVal.length - 1)
      return realVal
    }
  },
  created() {
    couponInfo({ couponId: this.$route.query.couponId }).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData
      console.log(this.categoryData)
    })
  },
  data() {
    return {
      sourceType: {
        '1': '导入',
        '2': '微信小程序',
        '3': 'H5',
        '4': '公众号',
        '5': '安卓',
        '6': '苹果',
        '7': '支付宝小程序',
        '8': '百度小程序',
        '9': '头条小程序',
        '-': '-'
      },
      categoryData: [],
      tableFormatData: {
        current: 'announcement',
        announcement: {
          key: 'announcement',
          api: {
            getList: ReceiveInfoList
          },
          tableData: [],
          files: {
            nickName: '',
            time: [],
            is_use: '',
            ids: [],
            checkall: '0',
            Recycle: '0'
          },
          options: {
            product_id: [],
            is_check: [{
              label: '开启',
              value: '1'
            },
            {
              label: '禁用',
              value: '0'
            }
            ]
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>
